import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
    FlatList,
} from "react-native";
import * as FORM from "./Form"
import { CFlex, CColor } from "../constant/css";
import { useSetState, useCurrent } from "../common/hooks";
import Constant from "../constant/Constant";

/**
 * * 列表组件
 * @param {object} props 配置项目
 * @param {object} props.data 数据元
 * @param {Function} props.renderItem 渲染 Item 组件
 * @param {Function} props.onRefresh 刷新
 * @param {Function} props.onLoadMore 加载更多
 * @param {string} props.bg 背景
 * @param {string} props.emptyBg 空背景
 * @param {string} props.emptyTitle 空提示
 * @param {Function} props.emptyComponent 空自定义展示组件
 * @param {number} props.emptyPaddingTop 空顶部间距
 * @param {number} props.numColumns 一行显示个数
 * @param {number} props.onEndReachedSize 触底间距
 * @param {Function} props.ItemSeparatorComponent 分隔符组件
 * @returns {React.ReactElement}
 */
const ScrollList = (props) => {
    const {
        data, renderItem = null, onRefresh = null, onLoadMore = null,
        bg, emptyBg = '', emptyTitle = '~暂无相关信息~', emptyComponent = undefined, emptyPaddingTop = 250,
        numColumns = 1, onEndReachedSize = 10, ItemSeparatorComponent = null,
        showsVerticalScrollIndicator = false, onEndReachedThreshold = 0.1,
    } = props

    const [state, setState] = useSetState({

    })

    const [ref, setRef] = useCurrent({
        scrollList: null
    })

    const emptyView = () =>
        emptyComponent ? emptyComponent() :
            <View style={{ ...CFlex.cc, paddingTop: emptyPaddingTop }}>
                <FORM.ExpoImage style={{ width: 250, height: 250 }} contentFit="cover"
                    source={require('./../assets/404.svg')} />
                <View style={{ marginVertical: 20 }}>
                    <Text style={{ fontSize: 15, color: CColor.DeepGray }}>{emptyTitle}</Text>
                </View>
            </View>

    return (
        <FlatList
            // 实例
            ref={(e) => setRef({ scrollList: e })}
            // 整体样式
            style={{ backgroundColor: bg || '#fff' }}
            // 源数据
            data={data}
            // Item渲染方法
            renderItem={renderItem}
            // 空
            ListEmptyComponent={emptyView}
            // 底部
            ListFooterComponent={null}
            // 性能优化
            keyExtractor={(item, index) => index.toString()}
            // 刷新事件
            onRefresh={() => onRefresh?.()}
            // 水平个数
            numColumns={numColumns}
            // 触底事件
            onEndReached={() => data.length >= onEndReachedSize && onLoadMore?.()}
            // 刷新状态
            refreshing={false}
            // 触底范围 0-1
            onEndReachedThreshold={onEndReachedThreshold}
            // 滚动条
            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
            // Item 分割符
            ItemSeparatorComponent={ItemSeparatorComponent}
        />
    )
}
export default ScrollList

const styles = StyleSheet.create({

});


